<mat-toolbar class="title" color="primary">
  <div>Add Widget</div>
  <button mat-icon-button (click)="onNoClick()">
    <mat-icon>close</mat-icon>
  </button>
</mat-toolbar>
  
<div mat-dialog-content style="text-align: center">
  <mat-tab-group>
    <mat-tab *ngFor="let category of objectKeys(widgets)" [label]="category"> 
      <mat-grid-list cols="2" rowHeight="5:1">
        <mat-grid-tile *ngFor="let wData of widgets[category]" rowspan="3">
          <div [ngStyle]="{'color': wData.enable ? '' : '#999'}">
            <h3>{{wData.title}}</h3>
            <p>{{wData.description}}</p>
            <button mat-raised-button color="primary"
              [mat-dialog-close]="{
                indexName: wData.indexName,
                strongIndex: wData.strongIndex,
                title: wData.title
              }"
              [disabled]="!wData.enable"
              class="add-widget-button"
              cdkFocusInitial
              ><mat-icon>add</mat-icon>add</button>
          </div>
        </mat-grid-tile>
      </mat-grid-list>
    </mat-tab>
  </mat-tab-group>
</div>
